<%--
  Created by IntelliJ IDEA.
  User: 贾振鹏
  Date: 2021/6/7
  Time: 20:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="${css}/pintuer.css">
    <link rel="stylesheet" href="${css}/admin.css">
    <script src="${js}/jquery.js"></script>
    <script src="${js}/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong></div>
    <div class="padding border-bottom">
        <button type="button" class="button border-yellow" onclick="window.location.href='#add'"><span class="icon-plus-square-o"></span> 添加内容</button>
    </div>
    <table class="table table-hover text-center">
        <tr>
            <th width="10%">序号</th>
            <th width="20%">图片</th>
            <th width="15%">标题</th>
            <th width="20%">修改时间</th>
            <th width="10%">是否参与轮播</th>
            <th width="15%">操作</th>
        </tr>
        <tbody>
        <c:forEach items="${loopList}" var="loop" varStatus="v">
            <tr>
                <td>${v.count}</td>
                <td><img src="${loop.src}" title="${loop.title}" alt="" width="120" height="50" /></td>
                <td>${loop.title}</td>
                <td>${loop.modifydate}</td>
                <td>
                    <c:if test="${loop.loop eq 1}"><span class="loopStatus" style="color: green;">已加入轮播</span></c:if>
                    <c:if test="${loop.loop ne 1}"><span class="loopStatus" style="color: red;">未轮播</span></c:if>
                </td>
                <td>
                    <div class="button-group">
                        <a class="button border-main updateLoop" href="javascript:;" name="${loop.id}"><span class="icon-edit"></span>修改轮播状态</a>
                    </div>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<script>
    $(function () {
        //修改轮播
        $(".updateLoop").click(function () {
            var loopImageId = $(this).attr("name");
            var index = $(".updateLoop").index($(this));
            var obj = $(".loopStatus").eq(index);
            var text = $(".loopStatus").eq(index).text();
            var tag;
            if(text=='已加入轮播'){
                tag = 0;
            }
            if(text=='未轮播'){
                tag = 1;
            }
            $.get("${root}/admin/loop/edit",
                {"loopImageId":loopImageId,"tag":tag},
            function (data) {
                if(data.code==200){
                    if(text=='已加入轮播'){
                        obj.text("未轮播");
                        obj.css("color","red");
                    }
                    if(text=='未轮播'){
                        obj.text("已加入轮播");
                        obj.css("color","green");
                    }
                }else {
                    alert(data.msg);
                }
            })

        })
    })

</script>

</body>
</html>
